@use 'variable' as v;
@use 'theme/theme-second' as t;
@use 'animation';

.#{v.$prefix}message {
  min-width: 300px;
  border: 1px solid t.$infoBorderColor;
  position: fixed;
  left: 50%;
  background-color: t.$infoBgColor;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 10px 15px;
  overflow: hidden;
  transition: transform 0.4s;
  border-radius: 4px;
  top: 25px;
  box-sizing: border-box;
  margin: 0;
  z-index: 1000;
  &-icon {
    width: 1em;
    height: 1em;
    margin-right: 5px;
  }
  p {
    padding: 0;
    padding-right: 15px;
    line-height: 1;
    font-size: 14px;
    color: t.$infoColor;
    margin: 0;
  }
  &-close {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    cursor: pointer;
    color: t.$infoColor;
    font-size: 20px;
    font-style: normal;
    &:hover,
    &:active {
      color: t.$infoColor;
    }
    &-icon {
      width: 1em;
      height: 1em;
    }
  }
  &-center {
    justify-content: center;
  }
  
  &-loading {
    background-color: t.$loadingBgColor;
    border-color: t.$loadingBorderColor;
    p,
    .#{v.$prefix}message-close {
      color: t.$loadingColor;
    }
    .#{v.$prefix}message-close:hover,
    .#{v.$prefix}message-close:active {
      color: t.$loadingColor;
    }
    &-icon {
      animation: loadingCircle 1s infinite linear;
      color: t.$loadingColor;
      @keyframes loadingCircle {
         100% {
           transform: rotate(360deg);
         }
      }
   }
  }

  &-success {
    background-color: t.$successBgColor;
    border-color: t.$successBorderColor;
    p,
    .#{v.$prefix}message-close {
      color: t.$successColor;
    }
    .#{v.$prefix}message-close:hover,
    .#{v.$prefix}message-close:active {
      color: t.$successColor;
    }
  }
  &-warning {
    background-color: t.$warningBgColor;
    border-color: t.$warningBorderColor;
    p,
    .#{v.$prefix}message-close {
      color: t.$warningColor;
    }
    .#{v.$prefix}message-close:hover,
    .#{v.$prefix}message-close:active {
      color: t.$warningColor;
    }
  }
  &-error {
    background-color: t.$errorBgColor;
    border-color: t.$errorBorderColor;
    p,
    .#{v.$prefix}message-close {
      color: t.$errorColor;
    }
    .#{v.$prefix}message-close:hover,
    .#{v.$prefix}message-close:active {
      color: t.$errorColor;
    }
  }
}
